<!-- 创建绩效考核 -->
<template>
  <a-drawer
    :title="title"
    width="650"
    :bodyStyle="{ padding: '0' }"
    :visible="drawerVisible"
    :maskClosable="false"
    @close="onDrawerClose">
    <div class="header-box">
      <a-steps size="small" :current="currentStepValue">
        <a-step v-for="item in stepList" :key="item.title" :title="item.title" />
      </a-steps>
    </div>
    <div class="detail-form-container">
      <div v-show="currentStepValue === 0">
        <a-form-model
          ref="formRef"
          :model="formData"
          :rules="formRules"
          layout="vertical">
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-model-item label="绩效考核名称" prop="examineName">
                <a-input v-model="formData.examineName" placeholder="请输入绩效考核名称" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-model-item label="所属品类" prop="examineCategory">
                <ASelectList v-model="formData.examineCategory" :isHasDict="false" :defaultOption="examineCategoryOption" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-model-item label="考核时间" prop="examineTime">
                <a-range-picker
                  v-model="formData.examineTime"
                  format="YYYY-MM-DD"
                  style="width:100%;"
                  @change="(timeRange, timeStringRange) => setTimeRange('examineTimeStart', 'examineTimeEnd', timeRange, timeStringRange)"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div v-show="currentStepValue === 1">
        选择考核供应商
      </div>
      <div v-show="currentStepValue === 2">
        定性、自动化考核
      </div>
      <div v-show="currentStepValue === 3">
        考核总得分
      </div>
    </div>
    <div class="footer-box">
      <slot name="footer">
        <a-button type="primary" @click="onNext">确认并下一步</a-button>
        <a-button :style="{ marginLeft: '8px' }" @click="onCancel">取消</a-button>
      </slot>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: 'PerformaceExamineCreate',
  props: {
    title: {
      type: String,
      default: '创建绩效考核'
    }
  },
  data() {
    return {
      drawerVisible: false,
      currentStepValue: 0,
      stepList: [
        { title: '编辑考核基础信息' },
        { title: '选择考核供应商' },
        { title: '定性、自动化考核' },
        { title: '考核总得分' }
      ],
      examineCategoryOption: [
        { label: '传感器、驱动电机', value: '1' },
      ],
      formData: {
        examineName: '',
        examineCategory: '',
        examineTime: [],
        examineTimeStart: '',
        examineTimeEnd: '',
      },
      formRules: {
        examineName: [{ required: true, message: '请输入绩效考核名称！', trigger: 'change' }],
        examineCategory: [{ required: true, message: '请选择所属品类！', trigger: 'change' }],
        examineTime: [{ required: true, message: '请选择考核时间！', trigger: 'change' }],
      },
    };
  },
  methods: {
    onDrawerOpen() {
      this.drawerVisible = true;
      this.$nextTick(() => {
        this.$refs.formRef.clearValidate();
      });
    },
    onDrawerClose() {
      this.drawerVisible = false;
    },

    onSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.$confirm({
            title: '操作提醒',
            content: '确定保存？',
            okText: '确认',
            cancelText: '取消',
            onOk: () => {
              this.currentStepValue++;
              this.$message.success(`操作成功`);
            }
          });
        } else {
          this.$message.error(`请把表单补充完整！`);
        }
      });
    },
    onDraft() {
      this.onDrawerClose();
      this.$message.success(`保存成功`);
      this.$emit('successCallback');
    },
    onNext() {
      if (this.currentStepValue === 0) {
        this.onSubmit();
      } else {
        this.currentStepValue++;
        if (this.currentStepValue >= 4) this.currentStepValue = 0;
      }
    },
    onCancel() {
      this.drawerVisible = false;
    }
  }
}
</script>


<style lang="less" scoped>
.header-box {
  background-color: rgba(245, 245, 245, 1);
  padding: 6px 30px;
}
.footer-box {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 10px;
  background-color: rgba(31, 127, 227, 0.08);
  display: flex;
  justify-content: center;
}
</style>